<script lang="ts" setup>
import { nextTick, ref, shallowRef } from 'vue';
import { Variable, VariableItem } from '../../common/types';
import { SecsFormat } from '../../common/enums';
import i18n from '../../common/i18n/index.ts';
import helper from '../../common/helpler';
import SecsFormatSelectVue from '../../components/SecsFormatSelect.vue';

const data = ref<Variable>({
    messages: [],
    items: [],
});

let lastChoosed = null as HTMLLIElement | null;
let currentItem = ref<VariableItem | null>(null);
const itemScrollbar = shallowRef<any>(null);
const ulItems = shallowRef<any>();
// const data = ref<VariableItem[]>([]);
const defaultMappingItemSecsFormat = ref(SecsFormat.U4);
const varClick = (evt: MouseEvent, item: VariableItem) => {
    let anyTarget = evt.target as any;
    while (anyTarget.tagName != "LI") {
        anyTarget = anyTarget.parentNode;
    }
    if (lastChoosed == anyTarget) {
        return;
    }
    if (lastChoosed) {
        lastChoosed?.classList.remove("is-var-active");
    }
    anyTarget.classList.add("is-var-active");
    lastChoosed = anyTarget;
    currentItem.value = item;
}

const addItem = () => {
    data.value.items.push({
        key: helper.getUniqueId(),
        id: "empty",
        desc: "",
        format: SecsFormat.U4,
        mappings: []
    });
    if (itemScrollbar.value) {
        nextTick(() => {
            const h1 = itemScrollbar.value.$el.clientHeight;
            const h2 = itemScrollbar.value.$el.childNodes[0].childNodes[0].offsetHeight;
            if (h2 > h1) {
                itemScrollbar.value.setScrollTop(h2);
            }
            for (let i = ulItems.value.childNodes.length - 1; i >= 0; i--) {
                if (ulItems.value.childNodes[i].tagName == "LI") {
                    ulItems.value.childNodes[i].click();
                    break;
                }
            }
        });
    }
}

const delItem = (itemKey: string) => {
    for (let i = 0; i < data.value.items.length; i++) {
        if (data.value.items[i].key == itemKey) {
            data.value.items.splice(i, 1);
            if (currentItem?.value?.key == itemKey) {
                currentItem.value = null;
            }
            break;
        }
    }
}

const addMappingItem = () => {
    if (currentItem == null) {
        return;
    }
    currentItem.value?.mappings.push({
        key: helper.getUniqueId(),
        value: "",
        format: defaultMappingItemSecsFormat.value,
        desc: ""
    });
}

const delMappingItem = (index: number) => {
    if (currentItem == null) {
        return;
    }
    currentItem.value?.mappings.splice(index, 1);
}

const load = (p: Variable) => {
    data.value.items = p.items;
    data.value.messages = p.messages;
    nextTick(() => {
        if (ulItems.value.children.length > 0) {
            ulItems.value.children[0].click();
        }
    })
}

const getData = () => {
    return data.value;
}

defineExpose({ load, getData })

</script>
<template>
    <el-container>
        <el-container>
            <el-aside width="180px" style="border-right:1px solid var(--color-toolbar-1) ;">
                <el-container>
                    <el-header height="30px"
                        style="background-color: var(--color-toolbar-1);display: flex; justify-content: space-between;justify-items: center;align-items: center;">
                        <div>
                            <el-icon style="cursor: pointer;" @click="addItem">
                                <Plus />
                            </el-icon>
                        </div>
                    </el-header>
                    <el-main class="no-padding" style="overflow: hidden;height: 379px;">
                        <el-scrollbar ref="itemScrollbar">
                            <ul ref="ulItems" class="eqp-var-list">
                                <li @click="varClick($event, item)" v-for="item in data.items" :key="item.key">
                                    <div style="display: flex;justify-content: space-between;">
                                        <span>{{ item.id }}</span>
                                        <span style="color:#888888;display: flex;">{{ item.format }}
                                            <el-icon class="eqp-var-del-icon" style="margin-left: 5px;"
                                                @click="delItem(item.key)">
                                                <CircleClose />
                                            </el-icon>
                                        </span>
                                    </div>
                                    <div
                                        style="color:#888888;text-wrap-mode: nowrap;text-overflow: ellipsis;overflow: hidden;">
                                        {{ item.desc }}
                                    </div>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </el-main>
                </el-container>
            </el-aside>
            <el-container>
                <el-header height="30px" class="no-padding"
                    style="background-color: var(--color-toolbar-1);line-height: 30px;">
                    {{ i18n.global.t("detail") }}
                </el-header>
                <el-main v-if="currentItem != null" style="padding:12px">
                    <table class="app-table-1">
                        <tbody>
                            <tr>
                                <th>VId</th>
                                <td>
                                    <el-input v-model="currentItem.id"></el-input>
                                </td>
                            </tr>
                            <tr>
                                <th>Desc</th>
                                <td>
                                    <el-input v-model="currentItem.desc"></el-input>
                                </td>
                            </tr>
                            <tr>
                                <th>Format</th>
                                <td>
                                    <SecsFormatSelectVue v-model="currentItem.format"
                                        style="width: 100px;margin-left: 3px;" filterable></SecsFormatSelectVue>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div
                                        style="background-color: var(--color-toolbar-1);display: flex; justify-content: space-between;justify-items: center;align-items: center;height: 30px;padding:0px 15px 0px 15px;">
                                        <el-icon style="cursor: pointer;" @click="addMappingItem">
                                            <Plus />
                                        </el-icon>
                                        <div style="user-select: none;">
                                            <span>Default Format
                                                <SecsFormatSelectVue v-model="defaultMappingItemSecsFormat"
                                                    style="width: 100px;margin-left: 3px;" filterable>
                                                </SecsFormatSelectVue>
                                            </span>
                                            <span style="margin-left: 5px;">Total: {{ currentItem.mappings.length
                                                }}</span>
                                        </div>
                                    </div>
                                    <div style="border:1px solid var(--el-border-color-lighter)">
                                        <el-table ref="tb1" :data="currentItem.mappings" style="width: 500px"
                                            height="219px">
                                            <el-table-column type="index" width="36px" align="right"
                                                header-align="center"></el-table-column>
                                            <el-table-column label="Value" width="100px" align="center">
                                                <template #default="scope">
                                                    <el-input v-model="scope.row.value"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="Desc" align="center">
                                                <template #default="scope">
                                                    <el-input v-model="scope.row.desc"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="Format" width="100px" align="center">
                                                <template #default="scope">
                                                    <SecsFormatSelectVue v-model="scope.row.format" filterable>
                                                    </SecsFormatSelectVue>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="Action" width="70" align="center">
                                                <template #default="{ $index }">
                                                    <el-button link type="primary" size="small"
                                                        @click="delMappingItem($index)">
                                                        Delete
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-main>
            </el-container>
        </el-container>
        <el-footer height="90px" style="border-top: 1px solid var(--el-border-color-lighter);">
            <div style="user-select: none;margin: 2px 0px 3px 0px;color:#666666;">
                Auto recoginze the messages which name of value is 'VID'
            </div>
            <el-checkbox-group v-model="data.messages">
                <el-checkbox label="S1F21" value="S1F21" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S1F22" value="S1F22" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S1F24" value="S1F24" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F33" value="S2F33" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F45" value="S2F45" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F46" value="S2F46" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F47" value="S2F47" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F48" value="S2F48" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S2F54" value="S2F54" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F13" value="S6F13" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F18" value="S6F18" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S6F22" value="S6F22" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S16F9" value="S16F9" style="margin-right: 15px;width:62px"></el-checkbox>
                <el-checkbox label="S17F1" value="S17F1" style="margin-right: 15px;width:62px"></el-checkbox>
            </el-checkbox-group>
        </el-footer>
    </el-container>
</template>